<!--
 * @author: Goalias
 * @since: 2025-01-09
-->
<script setup lang="ts">
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import * as echarts from 'echarts/core';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

import { onMounted, onUnmounted, ref } from 'vue';

const chartDom = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;


onMounted(() => {
  if (chartDom.value) {
    myChart = echarts.init(chartDom.value);
    const dateList = ["0-1 ms", "1-10 ms", "10-100 ms", "100-1000 ms", "1-10 s", ">10 s"]

    const option = {
      visualMap: [{
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 100
      }],
      title: {
        left: 'center',
        text: props.title
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: dateList
      },
      yAxis: {},
      series: [{
        type: 'line',
        showSymbol: false,
        data: props.yData,
        lineStyle: {
          color: 'purple'
        },
        areaStyle: {
          color: 'rgba(0, 0, 255, 0.2)'
        }
      }]
    };

    myChart.setOption(option);
  }
});

onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
  }
});


const props = defineProps<{
  title: string
  yData: number[]
}>()
</script>

<template>
<div class="container">
  <div ref="chartDom" style="width: 100%; height: 40vh;"></div>
</div>
</template>

<style scoped>

</style>
